const { defineConfig } = require("@vue/cli-service");

const path = require("path");

const NODE_ENV_APP = process.env;
const prod = process.env.NODE_ENV === "production";

const PACKAGE = require("./package.json");
const htmlTitle = "Vue-Admin-Vant";

const resolve = (dir) => path.join(__dirname, dir);

// 开启 gzip 压缩包
const CompressionPlugin = require("compression-webpack-plugin"); //引入gzip压缩插件
// 导入性能查看视图插件
const BundleAnalyzerPlugin =
    require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 对js压缩
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
// 图片压缩
// const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin")

module.exports = defineConfig({
    publicPath: NODE_ENV_APP.VUE_APP_PUBLIC_PATH,
    productionSourceMap: false, // 生产环境是否要生成 sourceMap 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    lintOnSave: prod ? false : true,
    devServer: {
        open: true,
        port: NODE_ENV_APP.VUE_APP_PORT,
        // 关闭浏览器全屏错误信息
        client: {
            overlay: false,
        },
        // proxy: {
        //   "/api": {
        //     target: "api-url", // 实际跨域请求的API地址
        //     changeOrigin: true, // 跨域
        //     // 请求地址重写  http://front-end/api/login ⇒ http://api-url/login
        //     pathRewrite: {
        //       "^/api": "/",
        //     },
        //   },
        // },
    },
    css: {
        // 定义全局变量文件
        loaderOptions: {
            less: {
                additionalData: `@import "@/assets/styles/globalVariable.less";`,
            },
        },
    }, // css的处理
    chainWebpack: (config) => {
        // 注册浏览器标题
        config.plugin("html").tap((args) => {
            args[0].title = PACKAGE.name || htmlTitle;
            return args;
        });
        //注册svg
        //设置svg
        config.module
            .rule("svg")
            .exclude.add(resolve("src/assets/icons"))
            .end();
        config.module
            .rule("icons")
            .test(/\.svg$/)
            .include.add(resolve("src/assets/icons"))
            .end()
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
                symbolId: "icon-[name]",
            })
            .end();
    }, //vue-cli内部的webpack配置
    configureWebpack: (config) => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== "production")
            return {
                resolve: {
                    alias: {
                        "@": path.resolve(__dirname, "src"),
                        coms: path.resolve(__dirname, "src/components"),
                        api: path.resolve(__dirname, "src/api"),
                    },
                },
            };
        // 生产环境才去配置 gzip
        return {
            plugins: [
                new CompressionPlugin({
                    //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
                    filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
                    // filename: "[path].gz[query]", //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
                    algorithm: "gzip", // 官方默认压缩算法也是gzip
                    test: /\.js$|\.html$|\.css$/, // 匹配文件名
                    threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
                    minRatio: 0.8, // 最小压缩比率，官方默认0.8
                    //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
                    // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
                    deleteOriginalAssets: false,
                }),
                // 查看包的文件体积大小
                new BundleAnalyzerPlugin({
                    // analyzerMode: "static",
                    // reportFilename: "report.html",
                    // openAnalyzer: false, // 不自动打开浏览器
                }),
                // 压缩js文件
                // new UglifyJsPlugin({
                //     uglifyOptions: {
                //         uglifyOptions: {
                //             compress: {
                //                 drop_debugger: true,
                //                 drop_console: true, // 生产环境自动删除console
                //             },
                //             warnings: false,
                //         },
                //         sourceMap: false,
                //         parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
                //     },
                // }),
            ],
        };
    },
});
